<template>
	<view style="position: relative;">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					申请入驻
				</view>
				<view class="action" @tap="$wanlshop.to('/pages/user/service')">
					<text class="wlIcon-kefu"></text>
				</view>
			</view>
		</view>
		<u-notice-bar v-if="shopdata.verify == 4" type="error" :volume-icon="false" mode="horizontal" :list="[`审核未通过：${shopdata.refuse}`]" :is-circular="false"></u-notice-bar>
		<form @submit="formSubmit">
			<view class="cu-form-group">
				<view class="title">店铺类型</view>
				<picker :disabled="shopdata.verify == 3 || shopdata.verify == 2" @change="PickerChange" :value="shopdata.state" :range="state_text">
					<view class="picker">
						{{state_text[shopdata.state]}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">店铺名称</view>
				<input :disabled="shopdata.verify == 3 || shopdata.verify == 2" name="shopname" v-model="shopdata.shopname" placeholder="请输入店铺名称"></input>
			</view>
			<view class="cu-form-group margin-bottom-bj">
				<view class="title">店铺头像</view>
				<input name="avatar" v-model="shopdata.avatar" placeholder="点击上传店铺头像" disabled
					@tap="chooseImg('avatar')"></input>
				<view class="cu-avatar radius" v-if="shopdata.avatar" @tap="previewImage(3)">
					<image :src="$wanlshop.oss(shopdata.avatar, 32, 0, 1)" mode="widthFix"></image>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title">{{name_text[shopdata.state]}}</view>
				<input name="name" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.name" :placeholder="'请输入'+name_text[shopdata.state]"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">{{number_text[shopdata.state]}}</view>
				<input name="number" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.number" :placeholder="'请输入'+number_text[shopdata.state]"></input>
			</view>

			<view class="cu-form-group margin-top-bj" :class="shopdata.state == 2 ? '':'margin-bottom-bj'">
				<view class="title">{{image_text[shopdata.state]}}</view>
				<input name="image" v-model="shopdata.image" :placeholder="'点击上传'+image_text[shopdata.state]" disabled
					@tap="chooseImg('image')"></input>
				<view class="cu-avatar radius" v-if="shopdata.image" @tap="previewImage(0)">
					<image :src="$wanlshop.oss(shopdata.image, 32, 0, 1)" mode="widthFix"></image>
				</view>
			</view>
			<view class="cu-form-group margin-bottom-bj" v-if="shopdata.state == 2">
				<view class="title">商标证书</view>
				<input name="trademark" v-model="shopdata.trademark" placeholder="点击上传商标证书" disabled
					@tap="chooseImg('trademark')"></input>
				<view class="cu-avatar radius" v-if="shopdata.trademark" @tap="previewImage(1)">
					<image :src="$wanlshop.oss(shopdata.trademark, 32, 0, 1)" mode="widthFix"></image>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title">微信号</view>
				<input name="wechat" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.wechat" placeholder="请输入微信号"></input>
				<text class='wlIcon-WeChat text-green'></text>
			</view>

			<view class="cu-form-group">
				<view class="title">联系方式</view>
				<input name="mobile" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.mobile" maxlength="11" type="number"
					placeholder="请输入手机号"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">店铺简介</view>
				<input name="bio" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.bio" placeholder="请输入店铺简介"></input>
			</view>
			<view class="cu-form-group" style="align-items:baseline">
				<view class="title">店铺介绍</view>
				<textarea name="content" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.content" placeholder="请输入店铺介绍" style="height: 240rpx;"></textarea>
				<!-- <input name="content" :disabled="shopdata.verify == 3 || shopdata.verify == 2" v-model="shopdata.content" placeholder="请输入店铺介绍"></input> -->
			</view>
<!-- 			<view :class="isNone?'isActive':''">
				<view class="inputImg">
					<text>资格凭证</text>
					<image @click="chooseImg('pic')"
						:src="shopdata.pic ? $wanlshop.oss(shopdata.pic, 32, 0, 1) : '/static/images/user/upload.jpg'"
						mode="widthFix"></image>
					<input style="display: none;" type="text" name="pic" v-model="shopdata.pic" />
				</view>
			</view> -->

			<view class="xieyi" v-if="shopdata.verify != 3 && shopdata.verify != 2">
				<view class="radio flex justify-center align-center">
					<view class="radio text-x" v-if="checked">
						<text class="wlIcon-xuanze-danxuan wanl-gray-light mg20" @click="checkTrue"></text>
					</view>
					<view class="radio text-x" v-else>
						<text class="wlIcon-xuanze wanl-gray-light mg20" @click="checkFalse"></text>
					</view>
				</view>
				<view class="xieyi_content">
					我已阅读并同意<text @click="xieyi">商城入驻协议</text>
				</view>
			</view>
			<view class="edgeInsetBottom"></view>
			<view class="wanlian cu-bar tabbar foot flex flex-direction"
				style="background-color: #FFFFFF;justify-content: center;">
				<button form-type="submit" :disabled="shopdata.verify == 3"
					class="cu-btn wanl-bg-orange lg">{{verify_text[shopdata.verify]}}</button>
			</view>
		</form>
		<view class="mask" v-if="shopdata.verify == 3"></view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		data() {
			return {
				state_text: ['个人', '企业', '旗舰店'],
				name_text: ['姓名', '企业名称', '企业名称'],
				number_text: ['证件号码', '统一信用代码', '统一信用代码'],
				image_text: ['手持身份证', '营业执照', '营业执照'],
				verify_text: ['立即入驻', '已申请 修改', '入驻审核中', '已入驻', '未通过审核 重新提交', '已修改成功'],
				shopdata: {
					state: 0,
					verify: 0,
					image: '',
					trademark: '',
					shopname: '', // 店铺名称
					// pic: '', // 资格凭证
					avatar: '', // 店铺头像
					bio:'', // 店铺简介
					content: '', // 店铺介绍
				},
				payList: [],
				checked: false,
				noClick: false,
				isNone: true
			}
		},
		onLoad(option) {
			uni.request({
				url: '/wanlshop/shop/apply',
				method: 'get',
				success: res => {
					if(res.data) {
						this.shopdata = res.data;
					}
				}
			});
		},
		methods: {
			checkTrue() {
				this.checked = false
			},
			checkFalse() {
				this.checked = true
			},
			PickerChange(e) {
				this.shopdata.state = e.detail.value
			},
			// 提交申请
			formSubmit(e) {
				// verify:0=提交资质,1=提交店铺,2=提交审核,3=通过,4=未通过
				if (this.shopdata.verify != 2 && this.shopdata.verify != 3) {
					if (!this.checked) {
						this.$wanlshop.msg('请勾选入驻协议');
						return false
					}
					this.wanlChecker(e);
				} else {
					this.$wanlshop.msg(`${this.verify_text[this.shopdata.state]}，不可再修改申请信息`);
				}
			},
			async wanlChecker(e) {
				//定义表单规则
				let rule = [];
				if(this.shopdata.state == 2) {
					rule = [
						{name: 'shopname',checkType: 'notnull',errorMsg: '请输入店铺名称'},
						{name: 'avatar',checkType: 'notnull',errorMsg: '请上传店铺头像'},
						{name: 'name',checkType: 'notnull',errorMsg: '请输入' + this.name_text[this.shopdata.state]},
						{name: 'number',checkType: 'notnull',errorMsg: '请输入' + this.number_text[this.shopdata.state]},
						{name: 'image',checkType: 'notnull',errorMsg: '请上传' + this.image_text[this.shopdata.state]},
						{name: 'trademark', checkType: 'notnull', errorMsg: '请上传商标证书'},
						{name: 'wechat',checkType: 'notnull',errorMsg: '请输入微信号'},
						{name: 'mobile',checkType: 'phoneno',errorMsg: '请输入正确的手机号'},
						{name: 'bio',checkType: 'notnull',errorMsg: '请输入店铺简介'},
						{name: 'content',checkType: 'notnull',errorMsg: '请输入店铺介绍'}
					]
				} else {
					rule = [
						{name: 'shopname',checkType: 'notnull',errorMsg: '请输入店铺名称'},
						{name: 'avatar',checkType: 'notnull',errorMsg: '请上传店铺头像'},
						{name: 'name',checkType: 'notnull',errorMsg: '请输入' + this.name_text[this.shopdata.state]},
						{name: 'number',checkType: 'notnull',errorMsg: '请输入' + this.number_text[this.shopdata.state]},
						{name: 'image',checkType: 'notnull',errorMsg: '请上传' + this.image_text[this.shopdata.state]},
						{name: 'wechat',checkType: 'notnull',errorMsg: '请输入微信号'},
						{name: 'mobile',checkType: 'phoneno',errorMsg: '请输入正确的手机号'},
						{name: 'bio',checkType: 'notnull',errorMsg: '请输入店铺简介'},
						{name: 'content',checkType: 'notnull',errorMsg: '请输入店铺介绍'}
					]
				}
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					var shopdata = this.shopdata;
					console.log(shopdata, 'shopdata');
					uni.request({
						url: '/wanlshop/shop/apply',
						method: 'POST',
						data: shopdata,
						success: res => {
							console.log(res)
							this.$wanlshop.msg('提交成功，平台将于7个工作日内与您联系');
							this.shopdata.verify = 2
							// setTimeout(() => {
							// 	uni.switchTab({
							// 		url: '/pages/user'
							// 	})
							// }, 1500);
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			// 选择图片
			chooseImg(name) {
				if(this.shopdata.verify == 3 || this.shopdata.verify == 2) {
					return this.$wanlshop.msg(`${this.verify_text[this.shopdata.state]}，不可再修改申请信息`);
				}
				uni.chooseImage({
				    sourceType: ["camera", "album"],
				    sizeType: "compressed",
				    count: 1,
				    success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								uni.getImageInfo({
									src: res.tempFilePaths[0],
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData: updata.data.storage == 'local' ? null : updata.data.multipart,
											success: data => {
												this.shopdata[name] = JSON.parse(data.data).data.fullurl;
											},
											fail: error =>{
												this.$wanlshop.msg(JSON.parse(error.data).msg);
											}
										});
									}
								});
							}
						});
				    }
				})
			},
			//预览图片
			previewImage(key) {
				let urls = [];
				let shopdata = this.shopdata;
				if (key == 3) {
					urls = [this.$wanlshop.oss(shopdata.avatar, 320, 0, 1)]
				} else {
					if (shopdata.state == 2) {
						urls = [this.$wanlshop.oss(shopdata.image, 320, 0, 1), this.$wanlshop.oss(shopdata.trademark, 320,
							0, 1)];
					} else {
						urls = [this.$wanlshop.oss(shopdata.image, 320, 0, 1)];
					}
				}
				uni.previewImage({

					urls: urls,
					current: urls[key],
					indicator: 'number'
				});
			},

			// 分享
			xieyi() {
				this.$wanlshop.to(`/pages/article/details?id=4&title=商家入住协议&type=singlepage`);
			},
		}
	}
</script>

<style>
	page {
		padding-bottom: 125rpx;
	}

	.cu-btn[disabled] {
		opacity: 1;
		color: #ffffff;
		background: #fe660059;
	}

	.wanlian.cu-bar.tabbar {
		background-color: transparent;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}

	.cu-form-group .title,
	.cu-form-group uni-input {
		font-size: 28rpx;
	}

	.cu-avatar image {
		width: 64rpx;
		height: 64rpx;
	}

	.xieyi {
		display: flex;
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.xieyi_content {
		line-height: 60rpx;
		margin-left: 20rpx;
	}

	.xieyi text {
		color: red;
		margin-left: 10rpx;
	}

	.mg20 {
		margin-top: 20rpx;
	}

	.inputImg {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin: 20rpx auto;
	}

	.inputImg text {
		margin: 36rpx 0 40rpx 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #1F1F1F;
	}

	.inputImg image {
		width: 382rpx;
		height: 222rpx;
		margin: 0 auto 52rpx auto;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>
